<!-- 充值 -->
<div id="step1">
  <form action="#" class="am-form">
    <fieldset>
      <div class="am-form-group">
        <label for="time">当前时间：</label>
        <input type="text" id="time" class="am-form-field" disabled required/>
      </div>

      <div class="am-form-group">
        <label for="name">用户名：</label>
        <input type="text" id="name" class="am-form-field" disabled required/>
      </div>

      <div class="am-form-group">
        <label for="amount">充值金额：</label>
        <input type="number" id="amount" min="1" max="500000" placeholder="充值范围：1~50万元，单位：元"
          class="am-form-field" required/>
      </div>

      <div class="am-form-group">
        <label>充值方式：</label>
        <select data-am-selected class="charge_type">
          <option value="0" selected>微信支付</option>
          <option value="1">支付宝支付</option>
          <option value="2">网银转账</option>
        </select>
      </div>

      <div class="am-form-group">
        <label for="memo">备注：</label>
        <textarea id="memo" minlength="10" maxlength="100" rows="5"></textarea>
      </div>

      <div style="text-align: center"><button class="am-btn am-btn-secondary" type="submit">下一步</button></div>
    </fieldset>
  </form>
</div>
<div class="charge-clue">
  <label>温馨提示</label>
  <ol>
    <li>为避免掉单情况发生，请您在支付页面指定时间内完成支付。</li>
  </ol>
</div>
<div class="clear"></div>

<div id="step2">
  <div class="wx">
  </div>

  <div class="zfb">
  </div>

  <div class="bank">
    请将款项：<span class="red total"> 0.00元 </span>汇到以下银行账号：
    <div class="important">
      请在汇款备注栏填写：<span class="red user">--</span>
    </div>
  </div>
</div>

<style type="text/css">
#step1 {
  float: left;
  text-align: left;
  width: 400px;
}
.charge-clue {
  float: left;
  margin-left: 20px;
}

#step2 {
  display: none;
  text-align: left;
  padding: 0px 20px 10px 20px;
}

.important {
  color: red;
  font-size: 18px;
}
</style>

<script>
  var now = get_server_time();
  $("#time").val(new Date(now * 1000).Format("yyyy-MM-dd HH:mm"));
  $("#name").val(context.user.user.mobile || '游客');
  $("#step2 .bank .user").html(context.user.user.mobile || '游客');

  $("#step1 .am-btn").click(function() {
      // 进入下一步
      $("#step1").hide();
      $(".charge-clue").hide();
      $("#step2").show();
      $("#step2 .bank .total").html(" " + $("#amount").val() + "元 ");
      return false;
  });
</script>